<template>
  <div>
    <!-- 搜索 -->
    <div class="searchBar">
      <a-input-search 
        :style="{width:'320px'}" 
        placeholder="快速发现答题应用" 
        button-text="搜索" 
        search-button
        size="large"
        allow-clear
        :loading="loading"
        @search="doSearch"
      />
    </div>
    <!-- 列表 -->
      <a-list
        :grid-props="{ gutter: [20, 20], sm: 24, md: 12, lg: 8, xl: 6 }"
        class="list-demo-action-layout"
        :bordered="false"
        :data="dataList"
        @page-change="onPageChange"
        :pagination-props="{
          pageSize: searchParams.pageSize,
          current: searchParams.current,
          total
        }"
      >
        <template #item="{ item }">
          <a-list-item class="list-demo-item" >
            <APPCard :app="item"/>
          </a-list-item>
        </template>
      </a-list>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, reactive } from 'vue';
import API from '@/api';
import APPCard from '@/components/APPCard.vue';
import message from '@arco-design/web-vue/es/message';
import { deleteUserUsingPost, listUserByPageUsingPost } from '@/api/userController';
import { listAppByPageUsingPost, listAppVoByPageUsingPost } from '@/api/appController';
import { REVIEW_STATUS_ENUM } from '@/constant/app';
  const dataList = ref<API.AppVO[]>([])

  const total = ref<any>(0)

  // 初始分页参数
  const initSearchParams = ref<API.AppQueryRequest>({
    current: 1,
    pageSize: 12
  })

  // 分页参数
  const searchParams = ref<API.AppQueryRequest>({
    ...initSearchParams.value
  })

  // 加载更多
  const loadData = async () => {
    
    // 搜索后台通过的题目
    const params = {
      reviewStatus: REVIEW_STATUS_ENUM.PASS,
      ...searchParams.value
    }
    const res = await listAppVoByPageUsingPost(params)
    if(res.data.code === 0) {
      dataList.value = res.data.data?.records as API.User[]
      total.value = res.data.data?.total as any  || 0
      total.value = parseInt(total.value)
    } else {
      message.error('获取数据失败:' + res.data.message as string)
    }
    if(loading.value = true) loading.value = false
    
  }


  const onPageChange = (page: number) => {
    searchParams.value.current = page
  }

  const loading = ref(false)
  const doSearch = (val:any, ev:any) => {
    loading.value = true
    searchParams.value = {
      ...initSearchParams.value,
      appName: val
    }
  }
  // 监听分页变化
  watchEffect(() => {
    loadData()
  })
</script>


<style lang="scss" scoped>

.searchBar {
  text-align: center;
  margin-bottom: 30px;
}
.list-demo-action-layout .image-area {
  width: 183px;
  height: 119px;
  border-radius: 2px;
  overflow: hidden;
}

.list-demo-action-layout .list-demo-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-fill-3);
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.list-demo-action-layout .arco-list-item-action .arco-icon {
  margin: 0 4px;
}
</style>